<template>
	<view class="order-details-bar">
		<!-- 交易状态 -->
		<view class="order-details-header uni-font-size-lg">交易成功</view>
		<!-- 物流信息 -->
		<navigator url="/pagesOrder/order-distribute/order-distribute" class="order-details-cell ">
			<icon-bar name='icondaishouhuo' :size='36'></icon-bar>
			<view class="order-details-cell-center">
				<view class="order-details-cell-center-1 uni-font-size-base">物流信息</view>
			</view>
			<icon-bar name='iconright' :size="30"></icon-bar>
		</navigator>
		<!-- 地址 -->
		<view class="order-details-cell ">
			<icon-bar name='icondizhi' :size="36"></icon-bar>
			<view class="order-details-cell-center">
				<view class="order-details-cell-center-1 uni-font-size-base">张三 123456789</view>
				<view class="uni-font-size-sm">广州天河</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="order-details-cell">
			<order-goods-item>
				<view class="order-details-goods-info-slot">
					<buttom-bar title='申请售后' :width="120"></buttom-bar>
					<view class="goods-info-slot-list">
						<view class="goods-info-slot-iten uni-font-size-sm">
							<view class="slot-iten-label uni-text-color-grey">商品总额</view>
							<view class="slot-iten-value uni-font-size-lg">￥25.36</view>
						</view>
					</view>
				</view>
			</order-goods-item>
		</view>
		<!-- 订单信息 -->
		<view class="order-details-cell">
			<view class="order-details-cell-list">
				<view class="order-details-cell-item uni-font-size-sm">
					<view class="cell-item-label uni-text-color-grey">订单编号：</view>
					<view class="cell-item-value">252525582414</view>
					<view class="cell-item-r">复制</view>
				</view>
				<view class="order-details-cell-item uni-font-size-sm">
					<view class="cell-item-label uni-text-color-grey">下单时间：</view>
					<view class="cell-item-value">252525582414</view>
				</view>
				<view class="order-details-cell-item uni-font-size-sm">
					<view class="cell-item-label uni-text-color-grey">支付时间：</view>
					<view class="cell-item-value">252525582414</view>
				</view>
			</view>
		</view>
		<!-- 推荐商品 -->
		<goods-list-bar title="为你推荐"></goods-list-bar>
		
		<view class="order-details-footer">
			<buttom-bar class="footer-buttom" title='删除订单' :height="100" :size="30" :round="false" :border="false" ></buttom-bar>
			<buttom-bar class="footer-buttom" title='再次购买' :height="100" :size="30" :round="false" :border="false" background="#dd524d" color='#fff'></buttom-bar>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'OrderDetailds',
		title: '订单详情',
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	@import  '@/uni.scss';
	.order-details-bar{
		width: 100%;
		padding-bottom: 100upx;
		.order-details-header{
			height: 100upx;
			color: $uni-text-color-inverse;
			background: $uni-bg-color-blue;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.order-details-cell{
			padding: 20upx;
			display: flex;
			align-items: center;
			background: $uni-bg-color;
			margin-bottom: 20upx;
			.order-details-cell-center{
				flex: 1;
				padding: 0 10upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.order-details-cell-center-1{
					font-weight: bold;
					margin: 5upx 0;
				}
			}
		}
		.order-details-goods-info-slot{
			width: 100%;
			padding: 10upx 20upx;
			box-sizing: border-box;
			display: flex;
			align-items: flex-end;
			flex-direction: column;
			.goods-info-slot-list{
				width: 100%;
				margin-top: 50upx;
				.goods-info-slot-iten{
					width: 100%;
					height: 60upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
		.order-details-cell-rows{
			width: 100%;
			.order-details-cell-cols{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.cell-cols-value{
					font-weight: bold;
				}
			}
		}
		.order-details-cell-list{
			width: 100%;
			.order-details-cell-item{
				width: 100%;
				height: 80upx;
				display: flex;
				align-items: center;
				.cell-item-label{
					width: 150upx;
				}
				.cell-item-value{
					margin-right: 20upx;
				}
				.cell-item-r{
					border:solid 2upx $uni-border-color;
					border-radius: 10upx;
					padding: 5upx 10upx;
					font-size: 20upx;
				}
			}
		}
		.order-details-footer{
			width: 100%;
			height: 100upx;
			position: fixed;
			bottom: var(--window-bottom);
			display: flex;
			align-items: center;
			background: $uni-bg-color;
			.footer-buttom{
				width: 100%;
			}
		}
	}
</style>
